<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="产品图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="image">
              <j-upload-oss v-model="model.image" fileType="image" bizPath="product" :number="1"></j-upload-oss>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="产品名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model.trim="model.name" placeholder="请输入产品名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="产品类目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryId">
              <a-cascader :options="treeData" placeholder="请选择产品类目" :fieldNames="fieldNames" v-model="model.categoryId" @change="handleChange" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea v-model="model.remark" :rows="3" placeholder="请输入备注"></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { productMixins } from '@/views/productLibrary/mixins/productMixins'
  export default {
    name: 'ProductLibraryPlaceholderModal',
    mixins:[productMixins],
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        categoryId: '',
        fieldNames: {
          label: 'name',
          children: 'children',
          value: 'id',
        },
        validatorRules: {
          name: [
            { required: true, message: '请输入标签名称!'},
          ],
          image: [
            { required: true, message: '请上传产品图片!'},
          ],
          categoryId: [
            { required: true, message: '请选择产品类目!'},
          ],
        },
        url: {
          add: "/hzkj-product/product/productLibrary/preempt/add",
          edit: "/hzkj-product/product/productLibrary/preempt/edit",
          queryById: "/hzkj-product/product/productLibrary/preempt/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      }
    },
    created () {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      async edit (record) {
        await this.loadData_('', 'queryMyCategory', record.categoryId);
        let categoryId = this.findAncestorsById(this.treeData, record.categoryId);
        this.model = Object.assign({}, {...record, categoryId });
        this.categoryId = this.model.categoryId;
        this.visible = true;
      },
      //通过最后一级id即countryId，查找前面两级id
      findAncestorsById(tree, id, result = []) {
        for (const node of tree) {
          if (node.id === id) {
            result.unshift(id);
            return result;
          }
          if (node.children && node.children.length) {
            const temp = this.findAncestorsById(node.children, id, result);
            if (temp) {
              result.unshift(node.id);
              return result;
            }
          }
        }
        return null;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let params = Object.assign({}, this.model);
            params.categoryId = this.categoryId;
            httpAction(httpurl, params, method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
      handleChange(value, selectedOptions){
        this.categoryId = [...value].pop();
      },
      handleTreeData(treeData){
        return treeData.map(item => {
          return {
            ...item,
            children: item.children ? this.handleTreeData(item.children) : []
          }
        })
      }
    }
  }
</script>